<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by a BSD-type license.
See the COPYING file for details.
-->

<style type="text/excss">
  @trait colors(color) {
    color: $color;
    background-color: $color;
  }
  @trait box(size) {
    width: $size;
    height: $size;
  }
  @trait marginTop(value) {
    margin-top: $value;
  }
  .foo {
    @mixin colors(red) box(100px);
    color: white;
  }
  .bar {
    color: red;
    @mixin colors(blue) box(200px) marginTop(-2px);
  }
</style>

<script src="../../excss.js"></script>
<script src="../tests.js"></script>

<div class="foo" expect="color: white; background-color: red; width: 100px; height: 100px">
  Foo
</div>
<div class="bar" expect="color: blue; background-color: blue; width: 200px; height: 200px; margin-top: -2px">
  Bar
</div>
